<template>
	<div>
		<el-row :span="24">
			<!-- pc -->
			<el-col :sm="24" :xs="0">
				<PcHedaer ref="pcHedaer"></PcHedaer>
				<div class="pc_con">
					<PcDrawer ref="pcDrawer" :navIndex="navIndex" :navs="navs" :changeNav="changeNav"></PcDrawer>
					<div class="bghhhhh">
						<div class="rightCon">
							<headerPcTow :title="$t('l_gerenziliao')"></headerPcTow>

							<div class="settingBox">
								<div class="conTow">
									<div class="itemTow">
										<div class="biVQMQRdp90j5_YC7dvaTow">
											<img v-if="userInfo && userInfo.logo" class="ava_img"
												:src="$F.getApiUrl()+`/profile/${userInfo.logo}`" alt="">
											<img v-else class="ava_img" src="/icons/mine/img_txn24.png" alt="">
											<!-- <div class="L3dN0XMXkHJ0Xc2OvuXr">
												<div class="vip-badge">
													<img src="../../assets/images/yh/vip.png" alt="">
													<span>0</span>
												</div>
											</div> -->
										</div>
										<div class="oxAzHvfGt4BZ_a1aPzCgTow" @click="headericon = true">
											{{$t('l_shezhi')}}</div>
									</div>
									<div class="item1Tow">
										<div class="item1boxTow">
											<i class="anticonTow">
												<i
													style="display: inline-flex; justify-content: center; align-items: center;">
													<svg viewBox="0 0 20.001 20" width="16px" height="16px"
														fill="currentColor" aria-hidden="true" focusable="false">
														<use xlink:href="/icons/icon.svg#icon_dl_zh--sprite"></use>
													</svg>
												</i>
											</i>
											<input type="text" :value="userInfo?userInfo.id:''" disabled="disabled">
										</div>
									</div>
									<div class="item1Tow">
										<div class="item1boxTow">
											<i class="anticonTow">
												<i
													style="display: inline-flex; justify-content: center; align-items: center;">
													<svg viewBox="0 0 20.001 20" width="16px" height="16px"
														fill="currentColor" aria-hidden="true" focusable="false">
														<use xlink:href="/icons/icon.svg#icon_dl_yhid--sprite"></use>
													</svg>
												</i>
											</i>
											<input type="text" :value="userInfo?userInfo.username:''"
												disabled="disabled">
										</div>
									</div>
									<!-- 	<div class="item1">
										<div class="item1box">
											<i class="anticon">
												<i style="display: inline-flex; justify-content: center; align-items: center;">
													<svg viewBox="0 0 20.001 20" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
														<use xlink:href="/icons/icon.svg#icon_dl_yhid--sprite"></use>
													</svg>
												</i>
											</i>
											<input type="text" disabled="disabled" placeholder="请先绑定提现账户">
											<span>去绑定</span>
										</div>
									</div> -->
									<!-- <p class="TZQNFPYcnqoR0csegFxt">生日（设置后不能修改）</p>
									<div class="data">
										<input type="text" placeholder="年">
										<select size="1">
											<option value="1">01</option>
											<option value="2">02</option>
											<option value="3">03</option>
											<option value="4">04</option>
											<option value="5">05</option>
											<option value="6">06</option>
											<option value="7">07</option>
											<option value="8">08</option>
											<option value="9">09</option>
											<option value="10">10</option>
											<option value="11">11</option>
											<option value="12">12</option>
										</select>
										<input type="text" placeholder="日">
									</div> -->
								</div>
								<!-- <div class="orkXHvtNM5R_5twq6l5I">
									<div class="back">返 回</div>
									<div class="baocun">保 存</div>
								</div> -->
								<div class="zzc" v-show="headericon">
									<div class="zzcboxTow">
										<div class="zzccon" style="border-radius: 10px;padding: 0px;">
											<div class="closeTow" @click="headericon = false">
												<i aria-label="图标: close"
													class="anticon anticon-close ant-modal-close-icon">
													<svg xmlns="http://www.w3.org/2000/svg" width="15px" height="15px"
														viewBox="0 0 16 16" data-icon="close" fill="currentColor"
														aria-hidden="true" focusable="false" class="">
														<g id="comm_icon_x" transform="translate(-1209.5 -160.5)">
															<path id="Line_14" data-name="Line 14"
																d="M14,15a1,1,0,0,1-.707-.293l-14-14a1,1,0,0,1,0-1.414,1,1,0,0,1,1.414,0l14,14A1,1,0,0,1,14,15Z"
																transform="translate(1210.5 161.5)"></path>
															<path id="Line_15" data-name="Line 15"
																d="M0,15a1,1,0,0,1-.707-.293,1,1,0,0,1,0-1.414l14-14a1,1,0,0,1,1.414,0,1,1,0,0,1,0,1.414l-14,14A1,1,0,0,1,0,15Z"
																transform="translate(1210.5 161.5)"></path>
														</g>
													</svg>
												</i>
											</div>
											<div class="ant-modal-headerTow">{{$t('l_genghuantouxiang')}}</div>
											<div class="ant-modal-bodyTow">
												<div class="r9gABE6oBYc11bPH0cMATow">
													<div class="AR8HX5Qvvmd1_D3K0XL0Tow">
														<div :class="`aVppsz0AnjueMTx32dh1Tow `+(sex==1?'select':'')"
															style="margin-right: 20px;" @click="changeSex(1)">
															<span class="zgHt8m0uJ9LOE8yI3hSY" style="margin-top: 6px;">
																<i
																	style="display: inline-flex; justify-content: center; align-items: center;">
																	<svg viewBox="0 0 23.785 23.785" width="1em"
																		height="1em" fill="currentColor"
																		aria-hidden="true" focusable="false">
																		<use
																			xlink:href="/icons/icon.svg#img_szxb1--sprite">
																		</use>
																	</svg>
																</i>
															</span>
															<span style="margin-left: 5px;">{{$t('l_nan')}}</span>
														</div>
														<div :class="`aVppsz0AnjueMTx32dh1Tow `+(sex==2?'select':'')"
															@click="changeSex(2)">
															<span class="zgHt8m0uJ9LOE8yI3hSYTow font12">
																<i
																	style="display: inline-flex; justify-content: center; align-items: center;">
																	<svg viewBox="0 0 23.785 23.785" width="1em"
																		height="1em" fill="currentColor"
																		aria-hidden="true" focusable="false">
																		<use
																			xlink:href="/icons/icon.svg#img_szxb2--sprite">
																		</use>
																	</svg>
																</i>
															</span>
															<span style="margin-left: 5px;">{{$t('l_nv')}}</span>
														</div>
													</div>
													<div class="my-scrollbar-contentTow">
														<ul>
															<li v-for="item in count" :class="item==ind?'select':''"
																@click="ind = item">
																<img v-if="sex==1"
																	:src="$F.getApiUrl()+`/profile/img_txn${item}.png`"
																	alt="">
																<img v-else
																	:src="$F.getApiUrl()+`/profile/img_ntx${item}.png`"
																	alt="">
																<p class="_ojhUxKWGyFdJIV2Lodx">
																	<i class="orcE9bnrEF9xDTLnxVZg gou"
																		style="display: inline-flex; justify-content: center; align-items: center;">
																		<svg viewBox="0 0 20 15" width="1em"
																			height="1em" fill="currentColor"
																			aria-hidden="true" focusable="false">
																			<use
																				xlink:href="/icons/icon.svg#comm_icon_gou--sprite">
																			</use>
																		</svg>
																	</i>
																	<i class="ZmbOmk0ieSKOdeIimJCA bg"
																		style="display: inline-flex; justify-content: center; align-items: center;">
																		<svg viewBox="0 0 28 28" width="1em"
																			height="1em" fill="currentColor"
																			aria-hidden="true" focusable="false">
																			<use
																				xlink:href="/icons/icon.svg#comm_img_corner--sprite">
																			</use>
																		</svg>
																	</i>
																</p>
															</li>
														</ul>
													</div>
													<div class="Rg0RckJ_QoLCuyyao8XKTow" @click="saveLogo">
														{{$t('l_baocun')}}</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

			</el-col>
			<!-- h5 -->
			<el-col :sm="0" :xs="24">
				<navHeader :title="$t('l_gerenziliao')"></navHeader>

				<div class="con">
					<div class="item">
						<div class="biVQMQRdp90j5_YC7dva">
							<img v-if="userInfo && userInfo.logo" class="ava_img"
								:src="$F.getApiUrl()+`/profile/${userInfo.logo}`" alt="">
							<img v-else class="ava_img" src="/icons/mine/img_txn24.png" alt="">
							<!-- <div class="L3dN0XMXkHJ0Xc2OvuXr">
						<div class="vip-badge">
							<img src="../../assets/images/yh/vip.png" alt="">
							<span>0</span>
						</div>
					</div> -->
						</div>
						<div class="oxAzHvfGt4BZ_a1aPzCg" @click="headericon = true">{{$t('l_shezhi')}}</div>
					</div>
					<div class="item1">
						<div class="item1box">
							<i class="anticon">
								<i style="display: inline-flex; justify-content: center; align-items: center;">
									<svg viewBox="0 0 20.001 20" width="1em" height="1em" fill="currentColor"
										aria-hidden="true" focusable="false">
										<use xlink:href="/icons/icon.svg#icon_dl_zh--sprite"></use>
									</svg>
								</i>
							</i>
							<input type="text" :value="userInfo?userInfo.id:''" disabled="disabled">
						</div>
					</div>
					<div class="item1">
						<div class="item1box">
							<i class="anticon">
								<i style="display: inline-flex; justify-content: center; align-items: center;">
									<svg viewBox="0 0 20.001 20" width="1em" height="1em" fill="currentColor"
										aria-hidden="true" focusable="false">
										<use xlink:href="/icons/icon.svg#icon_dl_yhid--sprite"></use>
									</svg>
								</i>
							</i>
							<input type="text" :value="userInfo?userInfo.username:''" disabled="disabled">
						</div>
					</div>
					<!-- 	<div class="item1">
				<div class="item1box">
					<i class="anticon">
						<i style="display: inline-flex; justify-content: center; align-items: center;">
							<svg viewBox="0 0 20.001 20" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
								<use xlink:href="/icons/icon.svg#icon_dl_yhid--sprite"></use>
							</svg>
						</i>
					</i>
					<input type="text" disabled="disabled" placeholder="请先绑定提现账户">
					<span>去绑定</span>
				</div>
			</div> -->
					<!-- <p class="TZQNFPYcnqoR0csegFxt">生日（设置后不能修改）</p>
			<div class="data">
				<input type="text" placeholder="年">
				<select size="1">
					<option value="1">01</option>
					<option value="2">02</option>
					<option value="3">03</option>
					<option value="4">04</option>
					<option value="5">05</option>
					<option value="6">06</option>
					<option value="7">07</option>
					<option value="8">08</option>
					<option value="9">09</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
				</select>
				<input type="text" placeholder="日">
			</div> -->
				</div>
				<!-- <div class="orkXHvtNM5R_5twq6l5I">
			<div class="back">返 回</div>
			<div class="baocun">保 存</div>
		</div> -->
				<div class="zzc" v-show="headericon">
					<div class="zzcbox">
						<div class="zzccon">
							<div class="close" @click="headericon = false">
								<i aria-label="图标: close" class="anticon anticon-close ant-modal-close-icon">
									<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"
										data-icon="close" fill="currentColor" aria-hidden="true" focusable="false"
										class="">
										<g id="comm_icon_x" transform="translate(-1209.5 -160.5)">
											<path id="Line_14" data-name="Line 14"
												d="M14,15a1,1,0,0,1-.707-.293l-14-14a1,1,0,0,1,0-1.414,1,1,0,0,1,1.414,0l14,14A1,1,0,0,1,14,15Z"
												transform="translate(1210.5 161.5)"></path>
											<path id="Line_15" data-name="Line 15"
												d="M0,15a1,1,0,0,1-.707-.293,1,1,0,0,1,0-1.414l14-14a1,1,0,0,1,1.414,0,1,1,0,0,1,0,1.414l-14,14A1,1,0,0,1,0,15Z"
												transform="translate(1210.5 161.5)"></path>
										</g>
									</svg>
								</i>
							</div>
							<div class="ant-modal-header">{{$t('l_genghuantouxiang')}}</div>
							<div class="ant-modal-body">
								<div class="r9gABE6oBYc11bPH0cMA">
									<div class="AR8HX5Qvvmd1_D3K0XL0">
										<div :class="`aVppsz0AnjueMTx32dh1 `+(sex==1?'select':'')"
											@click="changeSex(1)">
											<span class="zgHt8m0uJ9LOE8yI3hSY" style="margin-top: 6px;">
												<i
													style="display: inline-flex; justify-content: center; align-items: center;">
													<svg viewBox="0 0 23.785 23.785" width="1em" height="1em"
														fill="currentColor" aria-hidden="true" focusable="false">
														<use xlink:href="/icons/icon.svg#img_szxb1--sprite"></use>
													</svg>
												</i>
											</span>
											<span style="margin-left: 0.07rem;">{{$t('l_nan')}}</span>
										</div>
										<div :class="`aVppsz0AnjueMTx32dh1 `+(sex==2?'select':'')"
											@click="changeSex(2)">
											<span class="zgHt8m0uJ9LOE8yI3hSYTow font12">
												<i
													style="display: inline-flex; justify-content: center; align-items: center;">
													<svg viewBox="0 0 23.785 23.785" width="1em" height="1em"
														fill="currentColor" aria-hidden="true" focusable="false">
														<use xlink:href="/icons/icon.svg#img_szxb2--sprite"></use>
													</svg>
												</i>
											</span>
											<span style="margin-left: 0.07rem;">{{$t('l_nv')}}</span>
										</div>
									</div>
									<div class="my-scrollbar-content">
										<ul>
											<li v-for="item in count" :class="item==ind?'select':''"
												@click="ind = item">
												<img v-if="sex==1" :src="$F.getApiUrl()+`/profile/img_ntx${item}.png`"
													alt="">
												<img v-else :src="$F.getApiUrl()+`/profile/img_ntx${item}.png`" alt="">
												<p class="_ojhUxKWGyFdJIV2Lodx">
													<i class="orcE9bnrEF9xDTLnxVZg gou"
														style="display: inline-flex; justify-content: center; align-items: center;">
														<svg viewBox="0 0 20 15" width="1em" height="1em"
															fill="currentColor" aria-hidden="true" focusable="false">
															<use xlink:href="/icons/icon.svg#comm_icon_gou--sprite">
															</use>
														</svg>
													</i>
													<i class="ZmbOmk0ieSKOdeIimJCA bg"
														style="display: inline-flex; justify-content: center; align-items: center;">
														<svg viewBox="0 0 28 28" width="1em" height="1em"
															fill="currentColor" aria-hidden="true" focusable="false">
															<use xlink:href="/icons/icon.svg#comm_img_corner--sprite">
															</use>
														</svg>
													</i>
												</p>
											</li>
										</ul>
									</div>
									<div class="Rg0RckJ_QoLCuyyao8XK" @click="saveLogo">{{$t('l_baocun')}}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import navHeader from '../../components/navHeader.vue'
	import headerPcTow from '../../components/headerPcTow.vue'
	import PcHedaer from '../../components/pcheader.vue'
	import PcDrawer from '../../components/pcdrawer.vue'
	export default {
		components: {
			navHeader,
			PcHedaer,
			PcDrawer,
			headerPcTow
		},
		data() {
			return {
				userInfo: null,
				sex: 1,
				ind: 1,
				count: 16,
				headericon: false,
				navIndex: 0,
				navs: [{
						id: 0,
						name: this.$t('l_remen'),
						key: 'icon_game_menu_active_0',
					},
					{
						id: 2,
						name: this.$t('l_dianzi'),
						key: 'icon_game_menu_active_3',
					},
					{
						id: 7,
						name: this.$t('l_qipai'),
						key: 'icon_game_menu_active_1',
					},
					{
						id: 6,
						name: this.$t('l_buyu'),
						key: 'icon_game_menu_active_2',
					},
					{
						id: 1,
						name: this.$t('l_zhenren'),
						key: 'icon_game_menu_active_4',
					},
					{
						id: 4,
						name: this.$t('l_tiyu'),
						key: 'icon_game_menu_active_5',
					},
					{
						id: 3,
						name: this.$t('l_caipiao'),
						key: 'icon_game_menu_active_8',
					},

					{
						id: -2,
						name: this.$t('l_zuijin'),
						key: 'icon_game_menu_active_100',
					},
					// {
					// 	id: -3,
					// 	name: '收 藏',
					// 	key: 'icon_game_menu_active_101',
					// },
					{
						id: -4,
						name: this.$t('l_sousuo'),
						key: 'comm_icon_ss',
					},
				],
			}
		},
		created() {
			this.reloadUserInfo()
		},
		methods: {
			openMenus() {
				this.$refs.pcDrawer.openMenus()
			},
			closeMenus() {
				this.$refs.pcDrawer.closeMenus()
			},
			changeNav(item) {
				this.navIndex = item.id
				document.querySelector('.scroll-container').scrollTop = document.querySelector('#gameslist_' + item.id)
					.offsetTop - (window.outerWidth / 750 * 200)
			},
			changeSex(sex) {
				if (sex == 1) {
					this.count = 26;
				} else {
					this.count = 25;
				}
				this.ind = 1
				this.sex = sex

			},
			saveLogo() {
				this.headericon = false
				let logo = '';
				if (this.sex == 1) {
					logo = `img_txn${this.ind}.png`
				} else {
					logo = `img_ntx${this.ind}.png`
				}
				console.log(logo)
				this.userInfo.logo = logo

				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.updateInfo({
					logo: logo
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.reloadUserInfo(true);
					} else {
						this.$message.error(res.msg);
					}
				})

			},
			reloadUserInfo(reload = false) {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.userGetUserInfo({
					reload: reload ? 1 : 0
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.userInfo = res.data
						localStorage.setItem('userInfo', JSON.stringify(res.data))
					} else {
						this.$message.error(res.msg);
					}
				})
			},
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}

	/* pc */
	.bghhhhh {
		flex: 1;
		height: 300px;
	}

	.rightCon {
		width: 75%;
		margin: 0 auto;
	}

	.pc_con {
		width: 100%;
		display: flex;
		justify-content: flex-start;
	}

	.settingBox {
		padding: 25px 25% 50px;
		box-sizing: border-box;
		background-color: var(--theme-main-bg-color);
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20px;
	}

	.con {
		width: 100%;
		padding: 0.6rem 0.2rem 0;
	}

	.conTow {
		width: 100%;
		/* padding: 0.6rem 0.2rem 0; */
	}

	.item {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: .22rem;
		height: 1.1rem;
		margin-bottom: 0.5rem;
	}

	.itemTow {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 15px;
		/* height:20px; */
		margin-bottom: 10px;
	}

	.biVQMQRdp90j5_YC7dva {
		border-radius: 0.14rem;
		height: 1.1rem;
		position: relative;
		width: 1.1rem;
	}

	.biVQMQRdp90j5_YC7dva>img {
		width: 1.1rem;
		height: 1.1rem;
		border-radius: 0.14rem;
	}

	.biVQMQRdp90j5_YC7dvaTow {
		position: relative;
		width: 55px;
		height: 55px;
		border-radius: 5px
	}

	.biVQMQRdp90j5_YC7dvaTow>img {
		width: 55px;
		height: 55px;
		border-radius: 5px;
	}


	.L3dN0XMXkHJ0Xc2OvuXr {
		bottom: 0;
		position: absolute;
		right: 0;
	}

	.vip-badge {
		height: 0.24rem;
		max-width: 0.66rem;
		min-width: 0.5rem;
		padding: 0 0.035rem;
		border-radius: 0.04rem 0 0.04rem 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgb(36, 178, 153);
	}

	.vip-badge img {
		height: 0.172rem;
		min-width: auto !important;
		width: 0.368rem;
		border-radius: initial !important;
	}

	.vip-badge span {
		background: initial;
		font-size: .22rem;
		font-style: italic;
		margin: -0.025rem 0 0 0.01rem;
		transform: scale(.9);
		color: #e5b952;
	}

	.oxAzHvfGt4BZ_a1aPzCg {
		color: var(--theme-primary-color);
		cursor: pointer;
		margin-left: 0.4rem;
	}

	.oxAzHvfGt4BZ_a1aPzCgTow {
		color: var(--theme-primary-color);
		cursor: pointer;
		margin-left: 25px;
	}

	.zzc {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 20;
		background-color: rgba(0, 0, 0, .55);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.zzcbox {
		width: 7.1rem;
		max-width: calc(100vw - 16px);
		color: rgba(0, 0, 0, .65);
		font-size: 14px;
		font-variant: tabular-nums;
		line-height: 1.5;
		list-style: none;
	}

	.zzcboxTow {
		width: 35%;
		max-width: calc(100vw - 100px);
		color: rgba(0, 0, 0, .65);
		font-size: 14px;
		font-variant: tabular-nums;
		/* line-height: 1.5; */
		list-style: none;
	}

	.zzccon {
		height: auto;
	/* 	background-color: var(--theme-top-nav-bg);;
		border: 1px solid;
		border-color: var(--theme-color-line); */
		border-radius: 0.2rem;
		background-color: var(--theme-main-bg-color);
   		 border: thin solid;
			border-color: var(--theme-color-line);
	}

	.close {
		background: transparent;
		border: 0;
		color: var(--theme-text-color);
		cursor: pointer;
		font-weight: 700;
		line-height: 1;
		outline: 0;
		padding: 0;
		position: absolute;
		right: 0;
		text-decoration: none;
		top: 0;
		text-align: center;
		z-index: 10;
		font-size: .2rem;
		height: 0.6rem;
		line-height: .6rem;
		width: 0.6rem;
	}

	.closeTow {
		background: transparent;
		border: 0;
		color: var(--theme-text-color);
		cursor: pointer;
		font-weight: 700;
		line-height: 1;
		outline: 0;
		padding: 0;
		position: absolute;
		right: 0;
		text-decoration: none;
		top: -6px;
		text-align: center;
		z-index: 10;
		font-size: 15px;
		height: 55px;
		/* line-height: .6rem; */
		width: 55px;
	}

	.ant-modal-header {
		width: 100%;
		padding: 0.2rem 0.3rem;
		color: #ffffff;
		font-size: .3rem;
		font-weight: 700;
		line-height: .34rem;
		text-align: center;
	}

	.ant-modal-headerTow {
		width: 100%;
		padding: 10px 15px;
		color: #ffffff;
		font-size: 17px;
		font-weight: 700;
		text-align: center;
	}

	.ant-modal-body {
		padding: 0 0.64rem 0.25rem 0.74rem !important;
		word-wrap: break-word;
		font-size: 14px;
		line-height: 1.5;
	}

	.ant-modal-bodyTow {
		padding: 0 30px 30px 30px !important;
		word-wrap: break-word;
		font-size: 14px;
	}

	.r9gABE6oBYc11bPH0cMA {
		padding: 0.2rem 0 0.25rem;
	}

	.r9gABE6oBYc11bPH0cMATow {
		padding: 5px 0 5px;
	}

	.AR8HX5Qvvmd1_D3K0XL0 {
		font-size: .22rem;
		height: 0.5rem;
		margin-bottom: 0.5rem;
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.AR8HX5Qvvmd1_D3K0XL0Tow {
		font-size: 14px;
		height: 35px;
		margin-bottom: 20px;
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.aVppsz0AnjueMTx32dh1 {
		border-radius: 0.25rem;
		font-size: .22rem;
		height: 0.5rem;
		line-height: .5rem;
		margin-right: 0.4rem;
		width: 1.2rem;
		border: 1px solid var(--theme-color-line);
		color: var(--theme-text-color);
		cursor: pointer;
		min-width: 1rem;
		padding: 0 0.18rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.aVppsz0AnjueMTx32dh1Tow {
		border-radius: 17.5px;
		font-size: 14px;
		height: 32px;
		line-height: 32px;
		margin-right: 5px;
		width: 75px;
		border: 1px solid var(--theme-color-line);
		color: var(--theme-text-color);
		cursor: pointer;
		padding: 0 15px;
		display: flex;
		justify-content: center;
		align-items: center;
	}


	.zgHt8m0uJ9LOE8yI3hSY {
		color: #18a8e0;
		margin-top: 4px;
	}

	.zgHt8m0uJ9LOE8yI3hSYTow {
		color: #ff5662;
		margin-top: 4px;
	}

	.zgHt8m0uJ9LOE8yI3hSY svg {
		font-size: 16px;
	}

	.zgHt8m0uJ9LOE8yI3hSY.font12 svg {
		font-size: 12px;
	}

	.select {
		background-color: var(--theme-primary-color);
		border: none;
		color: #ffffff;
	}

	.select .zgHt8m0uJ9LOE8yI3hSY,
	.select .zgHt8m0uJ9LOE8yI3hSYTow {
		color: #fff;
	}

	.my-scrollbar-content {
		width: 100%;
		height: 100%;
		overflow-x: hidden;
		overflow-y: scroll;
	}

	.my-scrollbar-contentTow {
		width: 100%;
		height: 100%;
		overflow-x: hidden;
		overflow-y: scroll;
	}

	.my-scrollbar-content ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		max-height: 5.21rem;
	}

	.my-scrollbar-contentTow ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		max-height: 300px;
	}

	.my-scrollbar-content ul li {
		height: 1.04rem;
		margin: 0.1rem;
		width: 1.04rem;
		border: 1px solid transparent;
		border-radius: 0.1rem;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		position: relative;
	}

	.my-scrollbar-contentTow ul li {
		height: 50px;
		margin: 10px 0px;
		width: 16%;
		border: 1px solid transparent;
		border-radius: 5px;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		position: relative;
	}


	/* .my-scrollbar-content ul li:nth-child(4n) {
		margin-right: 0;
	} */

	.my-scrollbar-content ul li img {
		width: 1rem;
		height: 1rem;
		border-radius: 0.1rem;
	}

	.my-scrollbar-content ul li.select {
		border: 1px solid var(--theme-primary-color);
	}

	.my-scrollbar-contentTow ul li:nth-child(4n) {
		margin-right: 0;
	}

	.my-scrollbar-contentTow ul li img {
		height: 50px;
		width: 50px;
		border-radius: 5px;
	}

	.my-scrollbar-contentTow ul li .select {
		border: 1px solid var(--theme-primary-color);
	}

	._ojhUxKWGyFdJIV2Lodx {
		bottom: -0.01rem;
		display: none;
		height: 0.3rem;
		line-height: .3rem;
		overflow: hidden;
		position: absolute;
		right: -0.01rem;
		width: 0.3rem;
	}

	._ojhUxKWGyFdJIV2Lodx .gou {
		bottom: 0.04rem;
		color: #ffffff;
		height: 0.096rem;
		position: absolute;
		right: 0.04rem;
		width: 0.125rem;
	}

	._ojhUxKWGyFdJIV2Lodx .bg {
		color: var(--theme-primary-color);
		height: 100%;
		width: 100%;
	}

	.my-scrollbar-content ul li.select ._ojhUxKWGyFdJIV2Lodx {
		display: block;
	}

	.Rg0RckJ_QoLCuyyao8XK {
		height: 0.7rem;
		margin-top: 0.5rem;
		align-items: center;
		display: flex;
		justify-content: center;
		color: #ffffff;
		font-size: .24rem;
		height: 0.7rem;
		line-height: .55rem;
		text-align: center;
		width: 100%;
		background-color: var(--theme-primary-color);
		/* background-color: var(--theme-primary-color); */
		border-color: var(--theme-primary-color);
		border-radius: 0.14rem;
	}

	.Rg0RckJ_QoLCuyyao8XKTow {
		margin-top: 20px;
		align-items: center;
		display: flex;
		justify-content: center;
		color: #ffffff;
		font-size: 15px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		width: 100%;
		background-color: var(--theme-primary-color);
		border-color: var(--theme-primary-color);
		border-radius: 5px;
	}

	.item1 {
		width: 100%;
		margin-bottom: 0.5rem;
		color: rgba(0, 0, 0, .65);
		font-size: 14px;
		font-variant: tabular-nums;
		line-height: 1.5;
		list-style: none;
		margin: 0 0 24px;
		padding: 0;
		vertical-align: top;
	}

	.item1Tow {
		width: 100%;
		color: rgba(0, 0, 0, .65);
		font-size: 14px;
		font-variant: tabular-nums;
		list-style: none;
		margin: 20px 0 24px;
		padding: 0;
		vertical-align: top;
	}

	.item1box {
		border-radius: 0.14rem;
		color: #ffffff;
		font-size: .22rem;
		height: 0.7rem;
		width: 100%;
		/* background-color: #0e131b !important; */
		border: 1px solid var(--theme-color-line);
		background-color: var(--theme-bg-color)!important;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0.16rem;
	}

	.item1boxTow {
		border-radius: 5px;
		color: #ffffff;
		font-size: 14px;
		height: 40px;
		width: 100%;
		background-color: var(--theme-bg-color) !important;
		border: 1px solid var(--theme-bg-color);
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 10px;
	}


	.anticon {
		height: 0.25rem;
		width: 0.25rem;
		color: var(--theme-text-color-lighten);
		font-size: .22rem;
	}

	.anticonTow {
		height: 16px;
		width: 26px;
		color: var(--theme-text-color-lighten);
		font-size: 15px;
	}

	.item1boxTow input {
		flex: 1;
		padding: 0 5px;
		font-size: 14px;
		color: #ffffff;
		background: none;
		outline: none;
		border: 0px;
	}

	.item1box input {
		flex: 1;
		padding: 0 0.1rem;
		font-size: .22rem;
		color: #ffffff;
		background: none;
		outline: none;
		border: 0px;
	}

	input::-webkit-input-placeholder {
		/* placeholder颜色  */
		color: var(--theme-text-color-lighten);
	}

	.item1box span {
		color: var(--theme-primary-color);
	}

	.TZQNFPYcnqoR0csegFxt {
		font-size: .22rem;
		margin-top: 0.5rem;
		color: #fff;
		margin-bottom: 0.12rem;
	}

	.data {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.data input {
		width: 113px;
		list-style: none;
		margin: 0;
		line-height: 1.5;
		border-radius: 0.1rem;
		box-shadow: none;
		color: var(--theme-text-color);
		font-size: .2rem;
		height: 35px;
		text-align: left;
		background: none;
		outline: none;
		border: 1px solid var(--theme-color-line);
		padding: 4px 11px;
		background-color: var(--theme-top-nav-bg)!important;
	}

	select {
		width: 113px;
		list-style: none;
		margin: 0;
		line-height: 1.5;
		outline: 0;
		background-color: var(--theme-top-nav-bg)!important;
		border-radius: 0.1rem;
		box-shadow: none;
		color: var(--theme-text-color);
		font-size: .2rem;
		height: 35px;
		text-align: left;
		border-color: var(--theme-color-line);
		padding: 4px 11px;
	}

	select:focus {
		border-color: var(--theme-primary-color);
	}

	option {
		color: var(--theme-text-color);
	}

	.orkXHvtNM5R_5twq6l5I {
		align-items: center;
		background-color: var(--theme-top-nav-bg);;
		box-shadow: 0 -0.03rem 0.1rem 0 rgb(0 0 0 / 10%);
		display: flex;
		height: 1.3rem;
		justify-content: space-between;
		padding: 0 0.2rem;
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 10;
	}

	.back {
		background-color: var(--theme-top-nav-bg);;
		border: 1px solid var(--theme-primary-color);
		color: #005dfe !important;
		font-size: .24rem;
		height: 0.7rem;
		line-height: .68rem;
		margin-right: 0;
		text-align: center;
		width: 3.45rem;
		border-radius: 0.14rem;
		padding: 0 0.1rem;
	}

	.baocun {
		color: #ffffff;
		font-size: .24rem;
		height: 0.7rem;
		line-height: .7rem;
		text-align: center;
		width: 3.45rem;
		border-radius: 0.14rem;
		background-color: var(--theme-primary-color);
		border-color: var(--theme-primary-color);
	}
</style>